<template>
    <div class="con">
        <div class="toutu">
            <img src="../assets/images/toutu2.png" alt />
            <div class="text">
                <p>收款金额 (元)</p>
                <h2>{{amount}}</h2>
                <p>到账金额 {{dzmoney}}</p>
            </div>
        </div>

        <div class="info1">
            <dl>
                <dd>到账储蓄卡</dd>
                <dt>
                    <p>
                        <img :src="cxlogoUrl" alt class="icon" />
                        {{cxbankName}} ({{cxaccountNo}})
                    </p>
                </dt>
            </dl>
            <dl>
                <dd>支付信用卡</dd>
                <dt>
                    <p>
                        <img :src="xylogoUrl" alt class="icon" />
                        {{xybankName}} ({{xyaccountNo}})
                    </p>
                </dt>
            </dl>
        </div>
        <div class="tip">
            <p>
                请确认支付、到账双方的银行账号
                <br />
                点击“获取验证码”向手机{{phone}}发送短信
            </p>
        </div>
        <div class="yzm">
            <p style="text-align:center">
                <button @click="send()" id="yzm">获取验证码</button>
            </p>

            <input type="text" placeholder="请输入验证码" v-model="authCode" />
        </div>

        <div class="btn" @click="ok()">
            <button>下一步</button>
        </div>

        <div class="bg" v-show="pop">
            <div class="pop">
                <img src="../assets/images/wait.png" alt class="img" />
                <p>
                    正在交易...
                    <span id="jy">30s</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "trade",
    data() {
        return {
            amount: "",
            dzmoney: "",
            cxlogoUrl: "",
            cxbankName: "",
            cxaccountNo: "",
            xylogoUrl: "",
            xybankName: "",
            xyaccountNo: "",
            phone: "",
            timestamp: "",
            orderNo: "",
            pop: false,
            authCode: ""
        };
    },
    methods: {
        send() {
            var yzm = document.getElementById("yzm");

            var clock = "";
            var nums = 60;
            yzm.disabled = true; //将按钮置为不可点击
            yzm.style.opacity = "0.5";
            yzm.innerHTML = nums + "s";
            clock = setInterval(doLoop, 1000); //一秒执行一次
            function doLoop() {
                nums--;
                if (nums > 0) {
                    yzm.innerHTML = nums + "s";
                } else {
                    clearInterval(clock); //清除js定时器
                    yzm.disabled = false;
                    yzm.style.opacity = "1";

                    yzm.innerHTML = "获取验证码";
                    nums = 60; //重置时间
                }
            }
            this.axios({
                method: "post",
                headers: { token: localStorage.getItem("token") },
                url: `${this.siteUrl}/app/cj/pay/applyPayToSms?appid=web.2019&format=json&timestamp=${this.timestamp}`,
                data: {
                    deductCardId: localStorage.getItem("deductCardId"), // 信用卡
                    amount: this.amount,
                    repayCardId: localStorage.getItem("repayCardId"), // 储蓄卡
                    userId: localStorage.getItem("userId")
                }
            })
                .then(response => {
                    console.log(response);
                    if (response.data.success == 1) {
                        this.$toast(response.data.message);
                        this.orderNo = response.data.data.orderNo;
                    } else {
                        this.$toast(response.data.message);
                    }
                })
                .catch(error => {
                    console.log(error);
                    this.$toast("连接服务器异常");
                });
        },
        ok() {
            if (this.authCode == "") {
                this.$toast("请输入验证码");
            } else if (this.orderNo == "") {
                this.$toast("请重新获取验证码");
            } else {
                this.pop = true;

                var jy = document.getElementById("jy");

                var clock = "";
                var nums = 30;

                jy.innerHTML = nums + "s";
                clock = setInterval(doLoop, 1000); //一秒执行一次
                function doLoop() {
                    nums--;
                    if (nums > 0) {
                        jy.innerHTML = nums + "s";
                    } else {
                        clearInterval(clock); //清除js定时器
                        jy.innerHTML = "0s";
                    }
                }

                this.axios({
                    method: "post",
                    headers: { token: localStorage.getItem("token") },

                    url: `${this.siteUrl}/app/cj/pay/applyPay?appid=web.2019&format=json&timestamp=${this.timestamp}`,
                    data: {
                        userId: localStorage.getItem("userId"),
                        authCode: this.authCode,
                        orderNo: this.orderNo
                    }
                })
                    .then(response => {
                        console.log(response);
                        clearInterval(clock); //清除js定时器
                        jy.innerHTML = "0s";
                        this.pop = false;
                        if (response.data.success == 1) {
                            this.$router.push({
                                name: "tradesuccess",
                                params: { orderNo: this.orderNo }
                            });
                            this.$toast(response.data.message);
                        } else {
                            this.$toast(response.data.message);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        this.$toast("连接服务器异常");
                    });
            }
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());

        this.amount = localStorage.getItem("money");
        this.dzmoney = this.amount - this.amount * 0.0055 - 2;

        this.cxlogoUrl = localStorage.getItem("cxlogoUrl");
        this.cxbankName = localStorage.getItem("cxbankName");
        this.cxaccountNo = localStorage.getItem("cxaccountNo");
        this.cxaccountNo = this.cxaccountNo.substring(
            this.cxaccountNo.length - 4
        );
        this.xylogoUrl = localStorage.getItem("xylogoUrl");
        this.xybankName = localStorage.getItem("xybankName");
        this.xyaccountNo = localStorage.getItem("xyaccountNo");
        this.xyaccountNo = this.xyaccountNo.substring(
            this.xyaccountNo.length - 4
        );
        this.phone = localStorage.getItem("xyphone");
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #fff;
}
.con .toutu {
    width: 100%;
    position: relative;
}
.con .toutu img {
    width: 100%;
}
.con .toutu .text {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 0px;
    left: 0px;
}
.con .toutu .text p {
    color: #ffe3c2;
    font-weight: 200;
    margin-top: 5%;
}
.con .toutu .text h2 {
    color: #fff;
    font-size: 40px;
    line-height: 40px;
    margin-top: 12px;
}

.con .info1 dl {
    height: 60px;
    border-bottom: 1px solid #ececec;
    width: 90%;
    margin-left: 5%;
}
.con .info1 dd {
    line-height: 60px;
    color: #2d3659;
    font-weight: 200;
    float: left;
}
.con .info1 dt {
    float: right;
    width: 200px;
    height: 60px;
    line-height: 60px;
    position: relative;
    text-align: right;
    color: #2d3659;
}
.con .info1 dt p {
    position: absolute;
    top: 0px;
    right: 0px;
}
.con .info1 p .icon {
    vertical-align: middle;
    width: 18px;
    height: 18px;
    margin-right: 5px;
}

.con .info1 dt img {
    margin-left: 30px;
}
.choose {
    width: 20px;
    height: 20px;
    vertical-align: -5px;
}

.btn {
    width: 90%;
    height: 48px;
    line-height: 48px;
    background: #ffae4e;
    text-align: center;
    border-radius: 25px;
    box-shadow: 0px 10px 30px 0px #fbc27f;
    position: fixed;
    bottom: 40px;
    left: 5%;
}
.btn button {
    width: 100%;
    font-size: 17px;
    color: #fff;
    background: transparent;
}
input::-webkit-input-placeholder {
    color: #e9eaee;
    font-size: 34px;
}
.tip p {
    color: #a6a9b5;
    font-weight: 200;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    margin-top: 39px;
}
.yzm button {
    text-align: center;
    margin-top: 40px;
    color: #ffae4e;
    background: transparent;
}
.yzm input {
    height: 60px;
    font-size: 24px;
    width: 60%;
    margin-left: 20%;
    border-bottom: 1px solid #ececec;
    text-align: center;
}
input::-webkit-input-placeholder {
    color: #e9eaee;
    font-size: 24px;
}

/* 弹框 */
.bg {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
}

.bg .pop {
    width: 60%;
    background-color: rgba(0, 0, 0, 0.8);
    margin-left: 20%;
    margin-top: 45%;
    border-radius: 6px;
    height: 180px;
}
.bg .pop .img {
    width: 60%;
    margin-left: 20%;
    margin-top: 20px;
}
.bg p {
    text-align: center;
    color: #fff;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 200;
}
</style>
